<template>
  <div>
    <div class="werapp">
      <div class="heard">
        <ul>
          <li>用户</li>
          <li>教学</li>
          <li>题库</li>
          <li>运营</li>
          <li>营销</li>
          <li>商品</li>
          <li>财务</li>
          <li>统计</li>
          <li>系统</li>
        </ul>
      </div>
      <div class="footer">
        <div class="left">
          <router-link to="/students">学生管理</router-link>
          <router-link to="/teacher">讲师管理</router-link>
        </div>
        <div class="right">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.werapp {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .heard {
    width: 100%;
    height: 50px;
    background: blue;
    ul{
      list-style: none;
      line-height: 47px;
      margin-left: 180px;
      color: white;
      li{
        float: left;
        margin-left: 30px;
        &:active{
          border-bottom: 3px solid rgb(0, 200, 250);
        }
      }
      
    }
  }
  .footer {
    flex: 1;
    display: flex;
    .left {
      width: 200px;
      background: pink;
      height: 100%;
      display: flex;
      flex-direction: column;
     text-align: center;
    a{
      padding-top: 20px;
      text-decoration: none;
      color: black;
      &:active{
        color: blue;
      }
    }
    }
    .right {
      flex: 1;
    }
  }
}
</style>
